<template>
    <div>
        <h3 style="padding: 3px;">引导页设置</h3>
        <Row>
            <Col span="24" style="margin-top: 20px">
            <Form :label-width="120">
                <FormItem label="引导页面：">
                    <Input type="text" v-model="guideInfo.pageUrl" :disabled="true">

                    <Button v-if="guideInfo.pageUrl" type="ghost" size="small" slot="append" @click="update">更换</Button>
                    <Button v-else type="ghost" size="small" slot="append" @click="add">添加</Button>
                    </Input>
                    <Button type="info" style="float: right;margin:8px 0px 5px 5px;" size="small" @click="goGuideUrl">
                        进入

                        <Icon type="chevron-right"></Icon>
                    </Button>
                    <Button v-if="guideInfo.pageUrl" size="small" @click="deleteAD"
                            style="float: right;margin:8px 0px 5px 5px;">删除
                    </Button>
                </FormItem>
            </Form>
            </Col>
        </Row>
        <!--增加url对话框-->
        <Modal
                v-model="addUrlModel"
                title="引导页"
                :loading="addUrlModelLoading"
                @on-ok="submitUrl">
            <Input v-model="guideInfo.pageUrl" placeholder="请输入链接地址"></Input>
        </Modal>
        <!--修改对话框-->
        <Modal
                v-model="updateUrlModel"
                title="引导页"
                :loading="updateUrlModelLoading"
                @on-ok="updateUrl">
            <Input v-model="guideInfo.pageUrl" placeholder="请输入链接地址"></Input>
        </Modal>
    </div>
</template>
<script>
    import {addGuideUrl, getGuideUrlByLiveRoomId, updateGuideUrl, deleteAdPage} from '../../api/api'
    export default{
        data(){
            return {
                updateUrlModel: false,
                addUrlModel: false,
                addUrlModelLoading: true,
                updateUrlModelLoading: true,
                /*url:'',*/
                guideInfo: {
                    h5AdPageId: '',
                    pageUrl: '',
                    eventId: this.$store.state.operatedLiveRoomId
                }
            }
        },
        methods: {
            goGuideUrl(){
                window.open(this.guideInfo.pageUrl)
            },
            deleteAD(){
                deleteAdPage(this.guideInfo.h5AdPageId).then(res => {
                    if (res.code == 0) {
                        this.$Message.success('删除成功！');
                        this.guideInfo = {
                            h5AdPageId: '',
                            pageUrl: '',
                            eventId: this.$store.state.operatedLiveRoomId
                        }
                    } else {
                        this.$Message.error('删除失败！');
                    }
                })
            },
            submitUrl(){
                if (this.guideInfo.pageUrl) {
                    addGuideUrl(this.guideInfo).then(res => {
                        if (res.code == 0) {
                            this.addUrlModel = false
                            this.$Message.success('添加成功！');
                        }
                    }).catch(res => {
                        this.guideInfo.pageUrl = ''
                        this.$Message.error('操作失败！');
                    })
                }

            },
            updateUrl(){
                updateGuideUrl(this.guideInfo).then(res => {
                    if (res.code == 0) {
                        this.updateUrlModel = false
                        this.$Message.success('更新成功！');
                        this.getGuidePage()
                    }
                }).catch(res => {
                    this.updateUrlModel = false
                    this.getGuidePage()
                    this.$Message.error('操作失败！');
                })
            },
            update(){
                this.updateUrlModel = true
            },
            add(){
                this.addUrlModel = true
            },
            getGuidePage(){
                getGuideUrlByLiveRoomId(this.guideInfo.eventId).then(res => {
                    if (res.code == 0 && res.page != null) {
                        this.guideInfo = res.page
                    }
                })
            }
        },
        mounted(){
            this.getGuidePage()
        }
    }
</script>
<style scoped>

</style>